<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body background="images/no_data.jpg">
    <!--
        alt图片的描述 很重要 必须加 
        图片加载失败
        对搜索引擎友好
        盲人读屏软件
    -->
    <p>这是 img 中 src 不同的链接位置</p>
    <img src="./images/scene.jpg" alt="风景" />
    <br />
    <img src="images/scene.jpg" alt="风景" />
    <br />
    <img src="H:/Source/gitee/FrontEnd/HTML/images/scene.jpg" alt="风景" />
    <br />
    <hr />
    <p>这是 img 中 alt 描述图片信息</p>
    <img src="./images/no_data.jpg" alt="风景" />
    <br />
    <hr />
    <p>这是背景图片。如果图像小于页面，图像会进行重复。</p>
    <div style="width:100px;height:100px;background-image: url(images/scene.jpg)"></div>
    <hr />
    <p>排列图片</p>
    <img src="images/scene.jpg" alt="" />在文本中
    <br />
    <img src="images/scene.jpg" alt="" align="bottom" />在文本中
    <br />
    <img src="images/scene.jpg" alt="" align="middle" />在文本中
    <br />
    <img src="images/scene.jpg" alt="" align="top" />在文本中
    <br />
    <hr />
    <p>浮动图片</p>
    <p>
        <img src="images/scene.jpg" align="left" style="height:30px;" />带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
    </p>

    <p>
        <img src="images/scene.jpg" align="right" style="height:30px;" />带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
    </p>
    <hr />
    <p>调整图片尺寸</p>
    <img src="images/scene.jpg" alt="" width="30px" height="30px" />
    <br />
    <img src="images/scene.jpg" alt="" width="50px" height="50px" />
    <br />
    <img src="images/scene.jpg" alt="" width="80px" height="80px" />
    <br />
    <hr />
    <p>创建图像映射。img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器）</p>
    <img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html" target="_blank" alt="Venus" />
        <area shape="circle" coords="129,161,10" href="http://www.w3school.com.cn/example/html/mercur.html" target="_blank" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href="http://www.w3school.com.cn/example/html/sun.html" target="_blank" alt="Sun" />
    </map>
    <hr />
    <!--超链接-->
    <a href="">这是当前页面链接跳转，刷新，滑动到顶部</a>
    <br />
    <a href="" target="_self">这是当前页面链接跳转，刷新，滑动到顶部</a>
    <br />
    <a href="" target="_parent">这是当前页面链接跳转，刷新，滑动到顶部</a>
    <br />
    <a href="" target="_top">这是当前页面链接跳转，刷新，滑动到顶部</a>
    <br />
    <a href="#" target="">这是当前页面链接跳转，不刷新，滑动到顶部</a>
    <br />
    <a href="javascript:;" target="">这是当前页面链接不跳转</a>
    <br />
    <a href="" target="_blank">这是新页面链接跳转</a>
    <br />
    <hr />
    <div id="myAnchorDivID" name="myAnchorDiv">这是锚点</div>
    <a href="" id="myAnchorAID" name="myAnchorA">这是超链接锚点</a>
    <br />
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <p>---</p>
    <a href="#myAnchorDivID">链接普通id锚点</a>
    <br />
    <a href="#myAnchorDiv">链接普通name锚点</a>
    <br />
    <a href="#myAnchorAID">链接超链接id锚点</a>
    <br />
    <a href="#myAnchorA">链接超链接name锚点</a>
    <br />
    <hr />
    <a>超链接无href属性</a>
    <br />
    <hr />
    <a href="images/scene.jpg" name="local">本地链接</a>
    <br />
    <a href="https://www.baidu.com" name="remote">网络链接</a>
    <br />
    <hr />
    <p>图像作为链接</p>
    <a href="https://www.baidu.com" name="imgHref">
        <img src="images/scene.jpg" />
    </a>
    <br />
</body>

</html>